<template>
    <div class="feedback">
        <van-nav-bar
                title="问题反馈"
                left-text="返回"
                left-arrow
                @click-left="onClickLeft"></van-nav-bar>
        <div class="form">
            <van-form @submit="onSubmit">
                <van-field
                        v-model="content"
                        name="content"
                        rows="7"
                        autosize
                        type="textarea"
                        maxlength="250"
                        placeholder="请输入反馈内容.."
                        show-word-limit
                        :rules="[{ required: true, message: ' ' }]"
                />
                <van-uploader
                        v-model="fileList"
                        multiple
                        max-count="9"
                        :after-read="afterRead"/>
                <div style="margin: 16px;">
                    <van-button round block type="info" native-type="submit">
                        提交
                    </van-button>
                </div>
                <div class="tips">
                    <div>* 您的每次反馈我都会严肃查询。</div>
                    <div>* 如您需要跟我联系，请登陆后再进行提交反馈..</div>
                </div>
            </van-form>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue';
    import {
        Form
        , NavBar
        , Field
        , Toast
    } from 'vant';

    Vue.use(Field)
        .use(NavBar)
        .use(Form)
        .use(Toast);

    export default {
        name: "feedback",
        created() {
            this.$store.commit("setPlayerStatus", false);
            this.$store.commit("setTabbarStatus", false);
        },
        data() {
            return {
                fileList: [],
                content: "",
                formImgUrls: []
            }
        },
        methods: {
            onClickLeft() {
                this.$store.commit("setTabbarStatus", true);
                this.$router.push('/my');
            },
            // 上传之后处理
            afterRead(file) {
                var that = this;
                // 循环上传文件
                for (var i = 0; i < file.length; i++) {
                    let content = file[i].file;
                    let data = new FormData();
                    data.append('file', content);
                    this.axios.post('/user/upload?from=feedback', data)
                        .then((response) => {
                            var rs = response.data;
                            if (rs.code !== 1) {
                                // 失败提示
                                Toast.fail(rs.msg);
                            }
                            that.formImgUrls.push(rs.data);
                        })
                }
                Toast.success("上传成功");
            },
            // 提交表单
            onSubmit(forms) {
                if (!this.content && !this.formImgUrls.length) {
                    Toast.fail("输入内容不能完全为空..");
                    return false;
                }
                var that = this;
                var qs = require('qs');
                var params = qs.stringify({
                    content: that.content,
                    img_urls: that.formImgUrls
                });
                this.$http.post("user/feedback", params)
                    .then((response) => {
                        var rs = response.data;
                        if (rs.code !== 1) {
                            Toast.fail(rs.msg);
                        } else {
                            Toast({
                                message: '您的反馈我们已收到，感谢您的支持！',
                                icon: 'like-o',
                                forbidClick:true
                            });
                            setTimeout(function () {
                                // 清空
                                that.content = "";
                                that.fileList = [];
                            }, 2000);
                        }
                    })
            }
        }
    }
</script>

<style scoped>
    .form {
        padding: 10px;
    }

    .tips {
        margin: 20px;
        color: #7e8c8d;
        font-size: 10px;
    }

    .tips div {
        margin-top: 5px;
    }
</style>